<template>
	<div v-if="showGradeLoading" class="grade-global-loading">
		<div class="grade-loading-dialog">
			<div class="loading-center">
				<div class="custom-spinner">
					<svg class="spinner-svg" viewBox="25 25 50 50">
						<circle class="spinner-path" cx="50" cy="50" r="20" fill="none" stroke-width="5" />
					</svg>
				</div>
				<div class="loading-text">正在生成评估报告，稍后请前往个人档案查看完整报告!</div>
			</div>
		</div>
	</div>
	<div class="center_view" :style='{}'>
		<div class="section_title">
			<span>{{formName}}</span>
		</div>
		<div class="usersView">
			<div class="usersTabView">
				<div class="usersTab" :class="tabIndex=='center'?'usersTabActive':''" @click="tabClick({tableName:'center'})">个人中心</div>
				<div class="usersTab" :class="tabIndex=='updatePassword'?'usersTabActive':''" @click="tabClick({tableName:'updatePassword'})">修改密码</div>
                <div class="usersTab" :class="tabIndex=='friend'?'usersTabActive':''" @click="tabClick({tableName:'friend'})">好友列表</div>
                <div class="usersTab" :class="tabIndex=='chat'?'usersTabActive':''" @click="tabClick({tableName:'chat'})">聊天记录</div>
                <div class="usersTab" :class="tabIndex=='xiangmuxinxi'?'usersTabActive':''" @click="tabClick({tableName:'xiangmuxinxi'})">项目管理</div>
                <div class="usersTab" :class="tabIndex=='xiangmuchengguo'?'usersTabActive':''" @click="tabClick({tableName:'xiangmuchengguo'})">项目成果</div>
                <div class="usersTab" :class="tabIndex=='chuangyehuodong'?'usersTabActive':''" @click="tabClick({tableName:'chuangyehuodong'})">创业活动</div>
                <div class="usersTab" :class="tabIndex=='chuangyedasai'?'usersTabActive':''" @click="tabClick({tableName:'chuangyedasai'})">创业大赛</div>
                <div class="usersTab" :class="tabIndex=='zhishichanquan'?'usersTabActive':''" @click="tabClick({tableName:'zhishichanquan'})">知识产权</div>
                <div class="usersTab" @click="goToPersonalFile">个人档案</div>
                <div class="usersTab" @click="tabClick({tableName:'storeup',type:1})">我的收藏</div>
				<div class="usersTab" @click="homeClick()">返回首页</div>
			</div>
			<div class="usersBox updateInfo" v-if="tabIndex=='center'">
				<el-form class="usersForm" ref="userFormRef" :model="userForm" label-width="120px" :rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item prop="xueshengxingming" label="学生姓名">
								<el-input class="list_inp" v-model="userForm.xueshengxingming" placeholder="学生姓名" readonly disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="性别" prop="xingbie">
								<el-select
									class="list_sel"
									v-model="userForm.xingbie" 
									placeholder="请选择性别"
									style="width:100%;"
									disabled
									>
									<el-option v-for="(item,index) in xingbieLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="zhuanye" label="专业">
								<el-input class="list_inp" v-model="userForm.zhuanye" placeholder="专业"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="城市" prop="chengshi">
								<el-select
									class="list_sel"
									v-model="userForm.chengshi" 
									placeholder="请选择城市"
									style="width:100%;"
									disabled
									@change="(e)=>change1(e,'chengshi')">
									<el-option v-for="(item,index) in chengshiLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.shifoubiye !== '是'">
							<el-form-item prop="suozaixuexiao" label="所在学校">
								<el-input class="list_inp" v-model="userForm.suozaixuexiao" placeholder="所在学校" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.shifoubiye !== '是'">
							<el-form-item prop="xueyuan" label="学院">
								<el-input class="list_inp" v-model="userForm.xueyuan" placeholder="学院" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.shifoubiye !== '否'">
							<el-form-item label="园区" prop="yuanqu">
								<el-select
									class="list_sel"
									v-model="userForm.yuanqu" 
									placeholder="请选择园区"
									style="width:100%;"
									disabled
									@change="(e)=>change2(e,'yuanqu')">
									<el-option v-for="(item,index) in yuanquLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="userForm.shifoubiye !== '否'">
							<el-form-item label="街道" prop="jiedao">
								<el-select
									class="list_sel"
									v-model="userForm.jiedao" 
									placeholder="请选择街道"
									style="width:100%;"
									disabled
									>
									<el-option v-for="(item,index) in jiedaoLists" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					
						<el-col :span="24">
							<el-form-item prop="touxiang" label="头像">
								<uploads
									action="file/upload" 
									tip="请上传头像"
									style="width: 100%;text-align: left;"
									:fileUrls="userForm.touxiang?userForm.touxiang:''" 
									@change="touxiangUploadSuccess">
								</uploads>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="chuangyelingyu" label="创业领域">
								<el-input class="list_inp" v-model="userForm.chuangyelingyu" placeholder="创业领域"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="canjiahuodong" label="参加过的活动">
								<el-input class="list_inp" v-model="userForm.canjiahuodong" placeholder="参加过的活动"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="canyuxiangmu" label="参与过的项目">
								<el-input class="list_inp" v-model="userForm.canyuxiangmu" placeholder="参与过的项目"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="email" label="邮箱">
								<el-input class="list_inp" v-model="userForm.email" placeholder="邮箱" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="formModel_btn_box">
						<el-button class="formModel_confirm" @click="updateSession">更新信息</el-button>
						<el-button class="formModel_confirm" @click="showGradeDialog">评定等级</el-button>
						<el-button class="formModel_cancel" @click="loginout" type="danger">退出登录</el-button>
					</div>
				</el-form>
			</div>
			<div class="usersBox updatePassword" v-if="tabIndex=='updatePassword'">
				<el-form class="usersForm" ref="passwordFormRef" :model="passwordForm" label-width="120px"
					:rules="passwordRules">
					<el-form-item label="原密码" prop="mima">
						<el-input class="list_inp" v-model="passwordForm.mima" placeholder="请输入原密码"
							type="password"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="newmima">
						<el-input class="list_inp" v-model="passwordForm.newmima" placeholder="请输入新密码"
							type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="newmima2">
						<el-input class="list_inp" v-model="passwordForm.newmima2" placeholder="请再次输入新密码"
							type="password"></el-input>
					</el-form-item>
					<div class="formModel_btn_box">
						<el-button class="formModel_confirm" @click="updatePassword">修改密码</el-button>
					</div>
				</el-form>
			</div>
			<div class="usersBox pingdingdengji" v-if="tabIndex=='pingdingdengji'">
				<div class="grade-report">
					<div class="grade-header">
						<h2>创业者等级评定报告</h2>
						<p>评定日期：{{gradeReport.date}}</p>
					</div>
					<div class="grade-content">
						<div class="grade-section">
							<h3>基本信息</h3>
							<div class="grade-info">
								<p><span>姓名：</span>{{userForm.xueshengxingming}}</p>
								<p><span>专业：</span>{{userForm.zhuanye}}</p>
								<p v-if="userForm.shifoubiye !== '是'"><span>学校：</span>{{userForm.suozaixuexiao}}</p>
								<p v-if="userForm.shifoubiye !== '是'"><span>学院：</span>{{userForm.xueyuan}}</p>
							</div>
						</div>
						<div class="grade-section">
							<h3>创业评估</h3>
							<div class="grade-info">
								<p><span>创业领域：</span>{{userForm.chuangyelingyu}}</p>
								<p><span>参加过的活动：</span>{{userForm.canjiahuodong}}</p>
								<p><span>参与过的项目：</span>{{userForm.canyuxiangmu}}</p>
								<p><span>综合评级：</span><strong class="grade-level">{{gradeReport.level}}</strong></p>
							</div>
						</div>
						<div class="grade-section">
							<h3>评定详情</h3>
							<div class="grade-info">
								<div class="grade-detail" v-for="(item, index) in gradeReport.details" :key="index">
									<h4>{{item.title}}</h4>
									<p>{{item.content}}</p>
								</div>
							</div>
						</div>
						<div class="grade-section">
							<h3>发展建议</h3>
							<div class="grade-info">
								<p>{{gradeReport.suggestion}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="usersBox friend" v-if="tabIndex=='friend'">
				<div class="friend-chat-container">
					<div class="friend-list">
						<!-- 好友列表 -->
						<div class="friend-items">
							<div class="section-content" v-for="item in friendList" :key="item.id"
								:class="{'active': item.id === currentFriend?.id}"
								@click.stop="chatClick(item)">
								<div class="friend-item">
									<div class="avatar">
										<img :src="item.picture?$config.url + item.picture:require('@/assets/avatar.png')" alt="">
									</div>
									<div class="info">
										<div class="name">{{item.name}}</div>
										<div class="status" v-if="item.type==0">[好友申请]</div>
									</div>
									<div class="actions" v-if="item.type==0">
										<el-button @click.stop="confirmFriend(item)" size="small" type="success">同意</el-button>
										<el-button @click.stop="cancelFriend(item)" size="small" type="danger">拒绝</el-button>
									</div>
								</div>
							</div>
							<div class="noList" v-if="!friendList.length">
								暂无好友
							</div>
						</div>
					</div>
					<div class="chat-container" v-if="currentFriend">
						<div class="chat-header">
							<span>{{nowname}}</span>
						</div>
						<div class="chat-content" id="chat-content">
							<div v-bind:key="item.id" v-for="item in chatList">
								<div v-if="item.uid==userForm.id" class="right-content">
									<div class="message-content">
										<el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
												type="warning"></el-alert>
										<div v-else-if="item.fileType === 'image'" class="image-content">
											<img :src="$config.url + item.content" @click="previewImage($config.url + item.content)" />
										</div>
										<div v-else-if="item.fileType === 'file'" class="file-content" @click="downloadFile(item.content)">
											<i class="el-icon-document file-icon"></i>
											<div class="file-info">
												<div class="file-name">{{item.fileName || '文件'}}</div>
												<div class="file-size">{{item.fileSize ? formatFileSize(item.fileSize) : ''}}</div>
											</div>
										</div>
									</div>
									<div class="avatar">
										<img :src="mypic?$config.url + mypic:require('@/assets/avatar.png')" alt="" />
									</div>
								</div>
								<div v-else class="left-content">
									<div class="avatar">
										<img :src="nowfpic?$config.url + nowfpic:require('@/assets/avatar.png')" alt="" />
									</div>
									<div class="message-content">
										<el-alert v-if="item.format==1" class="text-content" :title="item.content" :closable="false"
												type="success"></el-alert>
										<div v-else-if="item.fileType === 'image'" class="image-content">
											<img :src="$config.url + item.content" @click="previewImage($config.url + item.content)" />
										</div>
										<div v-else-if="item.fileType === 'file'" class="file-content" @click="downloadFile(item.content)">
											<i class="el-icon-document file-icon"></i>
											<div class="file-info">
												<div class="file-name">{{item.fileName || '文件'}}</div>
												<div class="file-size">{{item.fileSize ? formatFileSize(item.fileSize) : ''}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="clear-float"></div>
							</div>
						</div>
						<div class="chat-footer">
							<div class="input-area">
								<el-input
									v-model="chatForm.content"
									type="textarea"
									:rows="3"
									placeholder="请输入消息"
									@keydown.enter.native.prevent="addChat"
								/>
							</div>
							<div class="action-bar">
								<el-upload 
									class="upload-btn" 
									:action="uploadUrl" 
									:on-success="handleUploadSuccess"
									:on-error="handleUploadError"
									:before-upload="beforeUpload"
									:headers="uploadHeaders"
									:show-file-list="false"
									name="file">
								</el-upload>
								<el-button :disabled="!chatForm.content" type="primary" @click="addChat">发送</el-button>
							</div>
						</div>
					</div>
					<div class="chat-placeholder" v-else>
						<div class="placeholder-content">
							<i class="el-icon-chat-dot-square"></i>
							<p>选择一个好友开始聊天</p>
						</div>
					</div>
				</div>
			</div>
			<div class="usersBox chatRecord" v-if="tabIndex=='chat'">
				<div class="z-box" :style='{"width":"70%","padding":"20px","margin":"0 auto"}'>
					<div class="section-content" v-for="item in recordList" :key="item.id" @click="chatClick(item)">
						<img :src="item.picture?$config.url + item.picture:require('@/assets/avatar.png')" style="width: 60px;border-radius: 50%;"
							 alt="">
						<div style="margin: 0 0 0 10px;display: flex;flex-direction: column;align-items: flex-start;">
							<div :style='{"fontSize":"14px","color":"#000","flex":"1","fontWeight":"bold"}'
								 class="item-style">{{item.name}}</div>
							<div :style='{"color":"#666","flex":"1","fontSize":"14px","lineHeight":"1.5","display":"flex","alignItems":"center"}'
								 class="item-style">
								<div v-if="item.notreadnum" style="padding: 0 5px;height: 16px;border-radius: 50%;text-align: center;line-height: 16px;font-size: 12px;background: #f00;color:#fff;width: auto;margin: 0 2px 0 0">{{item.notreadnum}}</div>
								{{item.content.split('/').length>1&&item.content.split('/')[0]=='upload'?'[图片]':item.content}}
							</div>
						</div>
					</div>
					<div class="noList" v-if="!recordList.length">
						暂无聊天记录
					</div>
				</div>
			</div>
		</div>
	</div>

		<!-- 评定等级弹窗 -->
		<el-dialog
		  v-model="gradeDialogVisible"
		  title="创业者等级评定报告"
		  width="400px"
		  :close-on-click-modal="false"
		  :show-close="false"
		  align-center
		>
		  <div class="grade-loading-dialog">
			<div v-if="loading" class="loading-center">
			  <div class="custom-spinner">
				<svg class="spinner-svg" viewBox="25 25 50 50">
				  <circle class="spinner-path" cx="50" cy="50" r="20" fill="none" stroke-width="5" />
				</svg>
			  </div>
			  <div class="loading-text">正在生成评估报告，稍后请前往个人档案查看完整报告!</div>
			</div>
		</div>
		</el-dialog>

</template>
<script setup>
	import {
		ElMessageBox
	} from 'element-plus'
	import moment from 'moment'
	import {
		ref,
		getCurrentInstance,
		watch,
		onUnmounted,
		onMounted,
		computed,
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import { useStore } from 'vuex'
	const store = useStore()
	import menu from '@/utils/menu'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const route = useRoute()
	const router = useRouter()

	// 跳转到个人档案页面
	const goToPersonalFile = () => {
		router.push('/index/pingdingdengjiList?centerType=1')
	}

	//基础信息
	const tableName = 'chuangyezhe'
	const formName = '个人中心'
	//基础信息
	const uploadUrl = computed(() => {
		return `${context.$config.url}file/upload`
	})
	//个人信息
	const userFormRef = ref(null)
	const userForm = ref({})
	const xuehaoLabel = computed(() => {
		return userForm.value.shifoubiye === '是' ? '账号' : '学号'
	})
	//修改密码
	const passwordFormRef = ref(null)
	const passwordForm = ref({
		mima: '',
		newmima: '',
		newmima2: ''
	})
	const passwordRules = ref({
		mima: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
		newmima: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
		newmima2: [{
			required: true,
			message: '请输入',
			trigger: 'blur'
		}, ],
	})
	//验证规则
	//匹配整数
	const validateIntNumber = (rule, value, callback) => {
		if (!value) {
			callback();
		} else if (!context?.$toolUtil.isIntNumer(value)) {
			callback(new Error("请输入整数"));
		} else {
			callback();
		}
	}
	//匹配数字
	const validateNumber = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isNumber(value)) {
			callback(new Error("请输入数字"));
		} else {
			callback();
		}
	}
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	//匹配电话号码
	const validatePhone = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isPhone(value)) {
			callback(new Error("请输入正确的电话号码"));
		} else {
			callback();
		}
	}
	//匹配邮箱
	const validateEmail = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isEmail(value)) {
			callback(new Error("请输入正确的邮箱地址"));
		} else {
			callback();
		}
	}
	//匹配身份证
	const validateIdCard = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.checkIdCard(value)) {
			callback(new Error("请输入正确的身份证号码"));
		} else {
			callback();
		}
	}
	//匹配网站地址
	const validateUrl = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isURL(value)) {
			callback(new Error("请输入正确的URL地址"));
		} else {
			callback();
		}
	}
	const rules = ref({
		xuehao: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		mima: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueshengxingming: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xingbie: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueyuan: [
			{required: ()=>userForm.value.shifoubiye !== '是',message: '请输入',trigger: 'blur'}, 
		],
		zhuanye: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		nianji: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xueli: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		shifoubiye: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		biyenianfen: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		xiangmufuzeren: [
			{required: true,message: '请输入',trigger: 'blur'}, 
		],
		suozaixuexiao: [
			{required: ()=>userForm.value.shifoubiye !== '是',message: '请输入',trigger: 'blur'}, 
		],
		youxiang: [
			{required: true,message: '请输入',trigger: 'blur'}, 
			{ validator: validateEmail, trigger: 'blur' },
		],
		touxiang: [
		],
		chuangyelingyu: [
		],
		canjiahuodong: [
		],
		canyuxiangmu: [
		],
		chengshi: [
		],
		yuanqu: [
			{required: ()=>userForm.value.shifoubiye !== '否',message: '请输入',trigger: 'blur'}, 
		],
		jiedao: [
			{required: ()=>userForm.value.shifoubiye !== '否',message: '请输入',trigger: 'blur'}, 
		],
		email: [
			{ validator: validateEmail, trigger: 'blur' },
		],
		lianxidianhua: [
			{required: true, message: '请输入联系电话', trigger: 'blur'},
			{validator: validatePhone, trigger: 'blur'}
		],
	})
	const getSession = () =>{
		context?.$http({
			url: `${context?.$toolUtil.storageGet('frontSessionTable')}/session`,
			method:'get'
		}).then(res=>{
			context?.$toolUtil.storageSet('userid',res.data.data.id)
			context?.$toolUtil.storageSet("frontName", res.data.data.xuehao)
			context?.$toolUtil.storageSet('headportrait',res.data.data.touxiang)
			userForm.value = res.data.data
			// Ensure email fields are populated
			if (res.data.data.email) {
				userForm.value.email = res.data.data.email
				userForm.value.youxiang = res.data.data.email
			}
		})
	}
	//菜单跳转
	const tabIndex = ref('center')
	const tabClick = (item) => {
		if (item.tableName == 'center') {
			tabIndex.value = 'center'
			return
		}
		if (item.tableName == 'updatePassword') {
			passwordForm.value = {
				mima: '',
				newmima: '',
				newmima2: ''
			}
			tabIndex.value = 'updatePassword'
			return
		}
		if (item.tableName == 'friend') {
			getFriendList()
			tabIndex.value = 'friend'
			return
		}
		if (item.tableName == 'chat') {
			getRecordList()
			tabIndex.value = 'chat'
			return
		}
		if(item.tableName=='examrecord'&&item.menuJump=='22'){
			router.push(`/index/examfailrecord?centerType=1`)
			return
		}
		if(item.tableName=='forum'&&item.menuJump=='14'){
			router.push(`/index/forumList?centerType=1&&myType=1`)
			return
		}
        if(item.tableName=='storeup'){
            router.push(`/index/storeupList?centerType=1&&type=${item.type}`)
            return;
        }
        router.push(`/index/${item.classname||item.tableName}List?centerType=1${item.menuJump?'&menuJump='+item.menuJump:''}`)
	}
    const hasBack = (menu)=>{
        if(menu.tableName=='storeup'){
            return false
        }
        return true
    }
	// 修改密码
	const updatePassword = async ()=>{
		passwordFormRef.value.validate(async (valid) => {
			if (valid) {
				if(passwordForm.value.mima != userForm.value.mima){
					context?.$toolUtil.message('原密码不正确', 'error')
					return false
				}
				if(passwordForm.value.newmima != passwordForm.value.newmima2){
					context?.$toolUtil.message('两次密码输入不正确', 'error')
					return false
				}
				userForm.value.mima = passwordForm.value.newmima
				store.dispatch('user/update',userForm.value).then(res=>{
					if(res?.data&&res.data.code==0){
						context?.$toolUtil.message('更新成功','success')
						passwordForm.value = {
							mima: '',
							newmima: '',
							newmima2: ''
						}
						getSession()
					}
				})
			}
		})
	}
	//菜单
	const menuList = ref([])
	const role = ref('')
	//性别列表
	const xingbieLists = ref([])
	//学历列表
	const xueliLists = ref([])
	//是否毕业列表
	const shifoubiyeLists = ref([])
	//项目负责人列表
	const xiangmufuzerenLists = ref([])
	//头像上传回调
	const touxiangUploadSuccess=(e)=>{
		userForm.value.touxiang = e
	}
	//类型列表
	const leixingLists = ref([])
	//城市列表
	const chengshiLists = ref([])
	//园区列表
	const yuanquLists = ref([])
	//街道列表
	const jiedaoLists = ref([])
	//初始化
	const init = () => {
		const menus = menu.list()
		let arr = []
		if (menus) {
			menuList.value = menus
		}
		role.value = context?.$toolUtil.storageGet('frontRole')
		for (let i = 0; i < menuList.value.length; i++) {
			if (menuList.value[i].roleName == role.value) {
				arr = menuList.value[i].backMenu
				break;
			}
		}
		menuList.value = arr
		xingbieLists.value = "男,女".split(',')
		xueliLists.value = "小学,初中,高中,中专,大专,本科,研究生,博士".split(',')
		shifoubiyeLists.value = "是,否".split(',')
		xiangmufuzerenLists.value = "是,否".split(',')
		leixingLists.value = "在校生,毕业生".split(',')
		context?.$http({
			url: `option/chengshi/chengshi`,
			method: 'get'
		}).then(res=>{
			chengshiLists.value = res.data.data
		})
		getSession()
	}
    // 多级联动参数
	const change1 = (e,conditionColumn)=>{
		userForm.value.yuanqu = '';
        yuanquLists.value = [];
		userForm.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/yuanqu/yuanqu?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			yuanquLists.value = res.data.data
		})
	}

    // 多级联动参数
	const change2 = (e,conditionColumn)=>{
		userForm.value.jiedao = '';
        jiedaoLists.value = [];
		context?.$http({
			url: `option/jiedao/jiedao?conditionColumn=${conditionColumn}&conditionValue=${e}`,
			method: 'get'
		}).then(res=>{
			jiedaoLists.value = res.data.data
		})
	}
	//菜单悬浮的显示与隐藏
	const usersTabIndex = ref(-1)
	const usersTabHover = (index) => {
		usersTabIndex.value = index
	}
	const usersTabLeave = () => {
		usersTabIndex.value = -1
	}
	//富文本
	const editorChange = (e,name) =>{
		userForm.value[name] = e
	}
	//保存
	const updateSession = () => {
		userFormRef.value.validate((valid)=>{
			if(valid){
				if(userForm.value.touxiang!=null){
					userForm.value.touxiang = userForm.value.touxiang.replace(new RegExp(context?.$config.url,"g"),"");
				}
				store.dispatch('user/update',userForm.value).then(res=>{
					if(res?.data&&res.data.code==0){
						context?.$toolUtil.message('更新成功','success')
						getSession()
					}
				})
			}
		})
	}
	//退出登录
	const loginout = () => {
		context?.$toolUtil.message('退出成功', 'success')
		context?.$toolUtil.storageClear()
		router.replace('/index/home')
	}
	const recordList = ref([])
	const chatVisible = ref(false)
	const nowfid = ref(0)
	const nowfpic = ref('')
	const nowname = ref('')
	const mypic = ref(localStorage.getItem('headportrait'))
	const chatList = ref([])
	const chatForm = ref({
		content: ''
	})
	const chatTimer = ref(null)
    const nowtablename = ref('')
    const friendList = ref([])
    const searchText = ref('')
    const currentFriend = ref(null)
    const getFriendList = () => {
        context.$http.get('chatfriend/page', {
            params: {
                uid: Number(localStorage.getItem('userid'))
            }
        }).then(res => {
            if (res.data && res.data.code == 0) {
                res.data.data.list.sort(function (a, b) {
                    return (a.type - b.type)
                });
                let arr = []
                for (let x in res.data.data.list) {
                    if (res.data.data.list[x].type != 2) {
                        arr.push(res.data.data.list[x])
                    }
                }
                friendList.value = arr
            }
        })
    }
    const confirmFriend = (item) => {
        ElMessageBox.confirm('是否同意好友申请？')
            .then(_ => {
                context.$http.post('chatfriend/add', {
                    uid: item.fid,
                    fid: Number(localStorage.getItem('userid')),
                    type: 1,
                    tablename: localStorage.getItem('frontSessionTable'),
                    name: localStorage.getItem('frontName'),
                    picture: localStorage.getItem('headportrait'),
                }).then(res => {
                    context.$http.post('chatfriend/add', {
                        uid: Number(localStorage.getItem('userid')),
                        fid: item.fid,
                        type: 1,
                        tablename: item.tablename,
                        name: item.name,
                        picture: item.picture,
                    }).then(res1 => {
                        context.$http.post('chatfriend/delete', [item.id]).then(res2 => {
                            if (res2.data && res2.data.code == 0) {
                                context.$toolUtil.message('添加好友成功','success');
                                getFriendList()
                            }
                        })
                    })
                })
            }).catch(_ => {
        });
    }
    const cancelFriend = (item) => {
        ElMessageBox.confirm('是否拒绝此好友申请？').then(_ => {
            context.$http.post('chatfriend/delete', [item.id]).then(res2 => {
                if (res2.data && res2.data.code == 0) {
                    context.$toolUtil.message('操作成功！','success');
                    getFriendList()
                }
            })
        }).catch(_ => {
        });
    }
	const getRecordList = () => {
		context.$http.get('chatfriend/page2', {
			params: {
				uid: Number(localStorage.getItem('userid')),
				type: 2
			}
		}).then(res => {
			if (res.data && res.data.code == 0) {
				recordList.value = res.data.data.list
			}
		})
	}
	const chatClick = (row) => {
		if (row.type == 0) {
			return false
		}
		nowtablename.value = row.tablename
		nowfid.value = row.fid
		nowfpic.value = row.picture
		nowname.value = row.name
		currentFriend.value = row
		getChatList()
	}
    const scrollFlag = ref(true)
	const getChatList = () => {
		context.$http.get('chatmessage/mlist', {
			params: {
				page: 1,
				limit: 1000,
				uid: Number(localStorage.getItem('userid')),
				fid: nowfid.value
			}
		}).then(res => {
			if (res.data && res.data.code == 0) {
				chatList.value = res.data.data.list.map(item => {
					if (item.format === 2) {
						// 检查文件类型
						if (item.content) {
							const fileName = item.content.toLowerCase();
							if (fileName.match(/\.(jpg|jpeg|png|gif|webp)$/)) {
								item.fileType = 'image';
							} else {
								item.fileType = 'file';
							}
						}
					}
					return item;
				});

				let div = document.getElementsByClassName('chat-content')[0]
				setTimeout(() => {
					if (div) {
						if (div.scrollTop + div.clientHeight == div.scrollHeight || scrollFlag.value) {
							div.scrollTop = div.scrollHeight
							scrollFlag.value = false
						}
					}
				}, 0)
				chatTimer.value = setTimeout(() => {
					getChatList()
				}, 5000)
			}
		})
	}
	const clearChat = () => {
		clearTimeout(chatTimer.value)
		chatList.value = []
		currentFriend.value = null
		getRecordList()
	}
	const uploadHeaders = computed(() => {
		return {
			'Token': localStorage.getItem('token') || '',
		}
	})

	// 修改上传配置
	const uploadConfig = {
		// 添加上传配置
		withCredentials: true, // 允许发送cookie
		timeout: 60000, // 设置超时时间
	}

	// 上传前检查
	const beforeUpload = (file) => {
		const maxSize = 100 * 1024 * 1024; // 100MB
		if (file.size > maxSize) {
			context.$toolUtil.message('文件大小不能超过100MB', 'error')
			return false
		}
		return true
	}

	// 修改错误处理函数
	const handleUploadError = (error, file) => {
		console.error('Upload error:', error)
		let errorMessage = '文件上传失败，请重试'
		
		if (error.status === 0) {
			errorMessage = '网络连接失败，请检查网络设置'
		} else if (error.response) {
			errorMessage = error.response.data?.msg || '上传失败，服务器响应异常'
		}
		
		context.$toolUtil.message(errorMessage, 'error')
	}

	// 修改上传成功处理函数
	const handleUploadSuccess = (response, file) => {
		console.log('Upload response:', response) // 添加调试日志
		try {
			if (response.code == 0) {
				clearTimeout(chatTimer.value)
				if (!chatList.value.length) {
					context.$http.post('chatfriend/add', {
						uid: Number(localStorage.getItem('userid')),
						fid: nowfid.value,
						name: nowname.value,
						picture: nowfpic.value,
						type: 2,
						tablename: nowtablename.value
					}).then(res => {
						context.$http.post('chatfriend/add', {
							uid: nowfid.value,
							fid: Number(localStorage.getItem('userid')),
							type: 2,
							tablename: localStorage.getItem('frontSessionTable'),
							name: localStorage.getItem('frontName'),
							picture: mypic.value,
						})
					})
				}

				// 判断文件类型
				const fileName = file.name.toLowerCase();
				const isImage = fileName.match(/\.(jpg|jpeg|png|gif|webp)$/);
				
				context.$http.post('chatmessage/add', {
					uid: Number(localStorage.getItem('userid')),
					fid: nowfid.value,
					content: 'file/' + response.file,
					format: 2,
					fileType: isImage ? 'image' : 'file',
					fileName: file.name,
					fileSize: file.size
				}).then(res2 => {
					chatForm.value = {
						content: ''
					}
					scrollFlag.value = true
					getChatList()
					context.$toolUtil.message('文件上传成功', 'success')
				})
			} else {
				throw new Error(response.msg || '上传失败')
			}
		} catch (err) {
			console.error('Upload success handler error:', err)
			context.$toolUtil.message(err.message || '处理上传响应失败', 'error')
		}
	}

	const previewImage = (url) => {
		const preview = document.createElement('div');
		preview.className = 'image-preview';
		preview.innerHTML = `<img src="${url}" />`;
		document.body.appendChild(preview);
		
		preview.onclick = () => {
			document.body.removeChild(preview);
		};
	}
	const downloadFile = (url) => {
		const fullUrl = context.$config.url + url;
		const link = document.createElement('a');
		link.href = fullUrl;
		link.target = '_blank';
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}
	const addChat = () => {
		clearTimeout(chatTimer.value)
        if (!chatList.value.length) {
            context.$http.post('chatfriend/add', {
                uid: Number(localStorage.getItem('userid')),
                fid: nowfid.value,
                name: nowname.value,
                picture: nowfpic.value,
                type: 2,
                tablename: nowtablename.value
            }).then(res => {
                context.$http.post('chatfriend/add', {
                    uid: nowfid.value,
                    fid: Number(localStorage.getItem('userid')),
                    type: 2,
                    tablename: localStorage.getItem('frontSessionTable'),
                    name: localStorage.getItem('frontName'),
                    picture: mypic.value,
                }).then(res1 => {

                })
            })
        }
		context.$http.post('chatmessage/add', {
			uid: Number(localStorage.getItem('userid')),
			fid: nowfid.value,
			content: chatForm.value.content,
			format: 1
		}).then(res2 => {
			chatForm.value = {
				content: ''
			}
            scrollFlag.value = true
			getChatList()
		})
	}
	init()
		// 新增homeClick方法
	const homeClick = () => {
		router.push('/index/home')
	}

	// 等级评定报告数据
	const gradeReport = ref({
		date: '',
		level: '',
		details: [],
		suggestion: ''
	})
	
	// 添加弹窗控制变量
	const gradeDialogVisible = ref(false)
	const loading = ref(false)
	const aiAnalysisResult = ref('')
	
	// 修改评定等级函数，调用接口并显示弹窗
	const showGradeDialog = () => {
		// 检查必填项
		if (!userForm.value.chuangyelingyu) {
			context.$toolUtil.message('请填写创业领域', 'warning')
			return
		}
		if (!userForm.value.canjiahuodong) {
			context.$toolUtil.message('请填写参加过的活动', 'warning')
			return
		}
		if (!userForm.value.canyuxiangmu) {
			context.$toolUtil.message('请填写参与过的项目', 'warning')
			return
		}
		// 显示全局加载动画
		showGradeLoading.value = true
		if (gradeLoadingTimer) clearTimeout(gradeLoadingTimer)
		gradeLoadingTimer = setTimeout(() => {
			showGradeLoading.value = false
		}, 2000)
		// 发送请求（不影响动画2s后消失）
		const requestData = {
			xuehao: userForm.value.xuehao,
			xingming: userForm.value.xueshengxingming,
			zhuanye: userForm.value.zhuanye,
			chuangyelingyu: userForm.value.chuangyelingyu,
			canjiahuodong: userForm.value.canjiahuodong,
			canyuxiangmu: userForm.value.canyuxiangmu
		}
		context.$http.post('aipersonal/deepseek-analyze', requestData)
	}
	
	// 从响应数据中提取分析结果
	const extractAnalysisFromData = (data) => {
		// 尝试不同的数据路径获取分析结果
		if (data.analysis) {
			return data.analysis;
		} else if (data.result && data.result.analysis) {
			return data.result.analysis;
		} else if (data.content) {
			return data.content;
		} else if (typeof data === 'string') {
			return data;
		} else {
			// 如果无法找到结构化的分析结果，尝试将整个数据转为字符串
			try {
				return JSON.stringify(data, null, 2);
				} catch (e) {
				console.error('转换数据为字符串时出错:', e);
				return null;
			}
				}
			}
			
	// 格式化分析内容，将Markdown转换为HTML
	const formatAnalysisContent = (content) => {
		if (!content) return ''
		
		try {
			// 移除干扰标记
			content = content.replace(/###+ \d+[\s\S]*?[，。：]、/g, '')
			
			// 移除多余的空行，只保留单个换行
			content = content.replace(/\n\s*\n+/g, '\n')
			
			// 处理标题和段落 (先处理这些，以便保留格式)
			content = content
				.replace(/### (.*?)(?:\r?\n|$)/g, '<h3>$1</h3>')
				.replace(/## (.*?)(?:\r?\n|$)/g, '<h2>$1</h2>')
				.replace(/# (.*?)(?:\r?\n|$)/g, '<h1>$1</h1>')
				.replace(/\r?\n\r?\n/g, '<br/>')
				.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
				.replace(/\*(.*?)\*/g, '<em>$1</em>')
				.replace(/---/g, '<hr>')
				
			// 处理列表 - 修改为不使用圆点的列表样式
			content = content
				.replace(/- (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1</li>')
				.replace(/• (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1</li>')
				.replace(/· (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1</li>')
				.replace(/○ (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1</li>')
				.replace(/● (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1</li>')
				.replace(/(\d+)\. (.*?)(?:\r?\n|$)/g, '<li style="list-style-type: none;">$1. $2</li>')
			
			content = content.replace(/(<li.*?<\/li>)+/g, '<ul style="list-style-type: none;">$&</ul>')
			
			// 移除所有剩余的Markdown符号
			content = content.replace(/#/g, '') // 移除所有井号
			content = content.replace(/\*/g, '') // 移除所有星号
			content = content.replace(/•/g, '') // 移除所有圆点
			content = content.replace(/·/g, '') // 移除所有间隔点
			content = content.replace(/○/g, '') // 移除所有空心圆
			content = content.replace(/●/g, '') // 移除所有实心圆
			content = content.replace(/^-\s+/gm, '') // 移除独立的-符号
			content = content.replace(/^\.\s+/gm, '') // 移除独立的.符号
			
			// 将单个换行替换为空格，使文本更紧凑
			content = content.replace(/\r?\n(?!\r?\n)/g, ' ')
			
			return content
		} catch (e) {
			console.error('格式化内容出错:', e)
			return content
		}
	}
	
	// 计算各字段得分
	const getFieldScore = (content, keywords) => {
		if (!content) return 0
		
		// 基础分数：内容长度
		let score = Math.min(content.length / 10, 15)
		
		// 关键词加分
		keywords.forEach(keyword => {
			if (content.includes(keyword)) {
				score += 5
			}
		})
		
		return Math.min(score, 30)
	}
	
	// 生成领域分析文本
	const generateFieldAnalysis = (content, score) => {
		if (score >= 25) {
			return `您的创业领域选择具有很高的市场价值和前景，${content}是当前创新创业的热门方向之一。建议深入了解行业动态，把握市场机遇。`
		} else if (score >= 15) {
			return `您选择的创业领域${content}有一定的发展空间，建议进一步明确细分方向，寻找差异化竞争点。`
		} else {
			return `您的创业领域描述较为简单，建议进一步明确您的创业方向，并对${content}进行更深入的市场调研和分析。`
		}
	}
	
	// 生成活动分析文本
	const generateActivityAnalysis = (content, score) => {
		if (score >= 25) {
			return `您参与了丰富多样的创业活动，如${content}等，这些经历对提升创业技能和拓展人脉非常有价值。`
		} else if (score >= 15) {
			return `您参与的活动${content}对创业能力的提升有一定帮助，建议继续积极参与各类创业培训和交流活动。`
		} else {
			return `您参与的创业活动较少，建议多参加一些行业交流、创业培训等活动，丰富创业经验和人脉资源。`
		}
	}
	
	// 生成项目分析文本
	const generateProjectAnalysis = (content, score) => {
		if (score >= 25) {
			return `您有丰富的项目经验，如${content}，这些项目经历展示了您的实战能力和创业潜力。`
		} else if (score >= 15) {
			return `您参与的项目${content}为您积累了一定的创业经验，建议在未来的项目中承担更多核心职责，提升综合能力。`
		} else {
			return `您的项目经验较为有限，建议积极参与各类创业项目或比赛，积累更多实战经验。`
		}
	}
	
	// 生成建议文本
	const generateSuggestion = (level, lingyu) => {
		if (level.startsWith('A')) {
			return `作为A级创业者，您在${lingyu}领域展现了出色的创业潜力。建议您可以考虑进一步拓展资源网络，寻找融资机会，将您的项目推向市场。同时，可以担任创业导师，带动更多年轻创业者成长。`
		} else if (level.startsWith('B')) {
			return `作为B级创业者，您已具备较好的创业基础。建议您针对${lingyu}领域深入学习专业知识，完善商业模式，并积极寻找合作伙伴，共同提升项目竞争力。`
		} else if (level.startsWith('C')) {
			return `作为C级创业者，您已迈出创业的第一步。建议您多参加${lingyu}相关的专业培训和交流活动，学习行业知识和创业经验，同时寻找创业导师的指导，提升综合能力。`
		} else {
			return `作为D级创业者，您正处于创业的起步阶段。建议您先明确${lingyu}领域的具体方向，多学习创业基础知识，参与创业实践活动，积累经验和资源，为未来的创业道路打好基础。`
		}
	}

	const showGradeLoading = ref(false)
	let gradeLoadingTimer = null

</script>

<style lang="scss" scoped>
	// Style for readonly/disabled fields - gray text instead of gray background
	:deep(.el-input.is-disabled .el-input__inner),
	:deep(.el-input.is-disabled .el-input__inner:focus),
	:deep(.el-input.is-disabled .el-input__inner:hover),
	:deep(.el-input.is-readonly .el-input__inner),
	:deep(.el-input.is-readonly .el-input__inner:focus),
	:deep(.el-input.is-readonly .el-input__inner:hover) {
		color: #999 !important;
		background-color: transparent !important;
		border-color: #ddd !important;
	}

	:deep(.el-select.is-disabled .el-input__inner),
	:deep(.el-select.is-disabled .el-input__inner:focus),
	:deep(.el-select.is-disabled .el-input__inner:hover) {
		color: #999 !important;
		background-color: transparent !important;
		border-color: #ddd !important;
	}

	// Grade evaluation report styles
	.usersBox.pingdingdengji {
		padding: 30px;
		
		.grade-report {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
			padding: 30px;
			
			.grade-header {
				text-align: center;
				margin-bottom: 30px;
				padding-bottom: 20px;
				border-bottom: 1px solid #eee;
				
				h2 {
					font-size: 24px;
					color: var(--theme);
					margin-bottom: 10px;
				}
				
				p {
					color: #666;
					font-size: 14px;
				}
			}
			
			.grade-content {
				.grade-section {
					margin-bottom: 30px;
					
					h3 {
						font-size: 18px;
						color: #333;
						margin-bottom: 15px;
						padding-left: 10px;
						border-left: 4px solid var(--theme);
					}
					
					.grade-info {
						padding: 0 15px;
						
						p {
							margin-bottom: 10px;
							line-height: 1.5;
							
							span {
								font-weight: bold;
								margin-right: 5px;
							}
							
							.grade-level {
								color: var(--theme);
								font-size: 18px;
								padding: 2px 10px;
								border-radius: 4px;
								background-color: rgba(var(--theme-rgb), 0.1);
							}
						}
						
						.grade-detail {
							margin-bottom: 15px;
							
							h4 {
								font-size: 16px;
								color: #333;
								margin-bottom: 8px;
							}
							
							p {
								color: #666;
								line-height: 1.6;
								text-indent: 2em;
							}
						}
					}
				}
			}
		}
	}
	
	// AI分析结果样式
	.grade-report {
		.grade-content {
			:deep(h1) {
				font-size: 22px;
				color: var(--theme);
				margin: 20px 0 15px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
			}
			
			:deep(h2) {
				font-size: 20px;
				color: #333;
				margin: 18px 0 12px;
			}
			
			:deep(h3) {
				font-size: 18px;
				color: #333;
				margin: 15px 0 10px;
				padding-left: 10px;
				border-left: 4px solid var(--theme);
			}
			
			:deep(strong) {
				font-weight: bold;
				color: #333;
			}
			
			:deep(hr) {
				margin: 15px 0;
				border: none;
				border-top: 1px solid #eee;
			}
			
			:deep(a) {
				color: var(--theme);
				text-decoration: none;
				
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
	
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
	}
	
	.grade-error {
		padding: 20px;
		
		.retry-tip {
			margin-top: 15px;
			text-align: center;
			color: #666;
		}
	}
	
	.grade-empty {
		padding: 40px 0;
		
		:deep(.el-empty__description) {
			margin-top: 15px;
		}
	}
	
	:deep(.error-message) {
		color: #F56C6C;
		margin-bottom: 10px;
		padding: 10px;
		border-left: 3px solid #F56C6C;
		background-color: #FEF0F0;
	}

	.usersView {
		.usersTabView {

			.usersTab {

				.usersTabHoverView {
					.usersTabHoverTab {
					}
					.usersTabHoverTab:hover {
					}
				}
			}
			.usersTab:hover {
			}
			.usersTabActive {
			}
		}

		.usersBox {
			.usersForm {
				// form item
				:deep(.el-form-item) {
					//label
					.el-form-item__label {
					}
					// 内容盒子
					.el-form-item__content {
						// 输入框
						.list_inp {
						}
						// 下拉框
						.list_sel {
							//去掉默认样式
							.select-trigger{
								height: 100%;
								.el-input{
									height: 100%;
								}
							}
						}
						//图片上传样式
						.el-upload-list  {
							//提示语
							.el-upload__tip {
							}
							//外部盒子
							.el-upload--picture-card {
								//图标
								.el-icon{
								}
							}
							.el-upload-list__item {
							}
						}
					}
				}
			}
		}
		// 按钮盒子
		.formModel_btn_box {
			.formModel_cancel {
			}
			.formModel_cancel:hover {
			}
		
			.formModel_confirm {
			}
			.formModel_confirm:hover {
			}
		}
	}
	.section-content {
		cursor: pointer;
		padding: 20px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
		margin: 0 0 20px;
		color: #333;
		background: #fff;
		display: flex;
		width: 100%;
		border-color: #efefef;
		border-width: 0;
		align-items: center;
		border-style: solid;
		position: relative;
	}

	.section-content:hover {
		color: #fff;
		background: #DF847F10;
	}
	.chat-content {
		padding-bottom: 20px;
		width: 100%;
		margin-bottom: 10px;
		max-height: 300000000px;
		height: 300px;
		overflow-y: scroll;
		border: 1px solid #eeeeee;
		background: #fff;

		.left-content {
			float: left;
			margin-bottom: 10px;
			padding: 10px;
			max-width: 80%;
			display: flex;
			align-items: center;
		}

		.right-content {
			float: right;
			margin-bottom: 10px;
			padding: 10px;
			max-width: 80%;
			display: flex;
			align-items: center;
		}
	}

	.clear-float {
		clear: both;
	}
	.noList {
		color: #9e9e9e;
		width: 100%;
		text-align: center;
		padding: 60px 0;
	}

	.friend-chat-container {
		display: flex;
		width: 100%;
		height: 700px;
		background: #f5f5f5;
		border: 1px solid #e0e0e0;
	}

	.friend-list {
		width: 280px;
		height: 100%;
		background: #fff;
		border-right: 1px solid #e0e0e0;
		display: flex;
		flex-direction: column;

		.friend-items {
			flex: 1;
			overflow-y: auto;
			padding: 0;

			.section-content {
				padding: 10px;
				margin: 0;
				border-bottom: 1px solid #f0f0f0;

				&:hover, &.active {
					background: #f0f0f0;
				}
			}
		}
	}

	.friend-item {
		display: flex;
		align-items: center;

		.avatar {
			width: 40px;
			height: 40px;
			margin-right: 10px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 3px;
				object-fit: cover;
			}
		}

		.info {
			flex: 1;

			.name {
				font-size: 14px;
				color: #333;
				margin-bottom: 3px;
			}

			.status {
				font-size: 12px;
				color: #999;
			}
		}

		.actions {
			.el-button {
				padding: 5px 10px;
				margin-left: 5px;
			}
		}
	}

	.chat-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;

		.chat-header {
			height: 50px;
			padding: 0 20px;
			background: #fff;
			border-bottom: 1px solid #e0e0e0;
			display: flex;
			align-items: center;
			font-size: 16px;
			color: #333;
		}

		.chat-content {
			flex: 1;
			padding: 20px;
			overflow-y: auto;

			.left-content, .right-content {
				display: flex;
				align-items: flex-start;
				margin-bottom: 20px;
				
				.avatar {
					width: 40px;
					height: 40px;
					img {
						width: 100%;
						height: 100%;
						border-radius: 3px;
					}
				}

				.message-content {
					max-width: 60%;
					margin: 0 10px;
					
					.text-content {
						margin: 0;
						background: #fff;
						border: none;
						border-radius: 3px;
						padding: 10px;
						box-shadow: 0 1px 2px rgba(0,0,0,0.1);
					}

					.image-content {
						img {
							max-width: 200px;
							max-height: 200px;
							border-radius: 3px;
							cursor: pointer;
						}
					}

					.file-content {
						background: #fff;
						border-radius: 3px;
						padding: 10px;
						box-shadow: 0 1px 2px rgba(0,0,0,0.1);
						display: flex;
						align-items: center;
						cursor: pointer;

						.file-icon {
							font-size: 24px;
							margin-right: 10px;
							color: #409EFF;
						}

						.file-info {
							flex: 1;
							overflow: hidden;

							.file-name {
								font-size: 14px;
								color: #333;
								margin-bottom: 2px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.file-size {
								font-size: 12px;
								color: #999;
							}
						}
					}
				}
			}

			.right-content {
				.message-content {
					.text-content {
						background: #95EC69;
					}

					.file-content {
						background: #95EC69;
					}
				}
			}
		}

		.chat-footer {
			background: #fff;
			border-top: 1px solid #e0e0e0;
			padding: 10px;

			.input-area {
				padding: 10px;
				
				.el-textarea {
					textarea {
						resize: none;
						border: none;
						padding: 0;
						
						&:focus {
							box-shadow: none;
						}
					}
				}
			}

			.action-bar {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 0 10px 10px;

				.upload-btn {
					margin-right: 10px;
					
					:deep(.el-upload) {
						display: block;
					}

					.el-button {
						display: flex;
						align-items: center;
						padding: 10px 15px;
						
						i {
							margin-right: 5px;
							font-size: 16px;
						}
					}
				}

				.el-button {
					padding: 10px 20px;
				}
			}
		}
	}

	.chat-placeholder {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;

		.placeholder-content {
			text-align: center;
			color: #999;

			i {
				font-size: 48px;
				margin-bottom: 10px;
			}

			p {
				margin: 0;
				font-size: 14px;
			}
		}
	}

	.image-preview {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;

		img {
			max-width: 90%;
			max-height: 90%;
			object-fit: contain;
		}
	}

	.updatePassword {
		.usersForm {
			width: 100%;
			max-width: 500px;
			margin: 0 auto;
			padding: 30px;

			.el-form-item {
				margin-bottom: 20px;
				display: block !important;

				.el-form-item__label {
					float: none;
					display: block;
					text-align: left;
					padding: 0 0 10px;
					line-height: 1;
					color: #333;
				}

				.el-form-item__content {
					margin-left: 0 !important;
					display: block;

					.list_inp {
						width: 100%;
						height: 40px;
						line-height: 40px;
						border: 1px solid #ddd;
						border-radius: 4px;
						padding: 0 15px;
						font-size: 14px;

						&:focus {
							border-color: #409EFF;
						}
					}
				}
			}

			.formModel_btn_box {
				margin-top: 30px;
				text-align: center;

				.formModel_confirm {
					width: 120px;
					height: 40px;
					font-size: 14px;
				}
			}
		}
	}

	.grade-global-loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(255,255,255,0.85);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
/**总盒子**/
.center_view {
    width: 1200px;
    margin: 20px auto;
    padding: 40px 20px 20px ;
    background: #fff;
    overflow: hidden;
    font-size: 16px;
}
/**标题**/
.center_view .section_title{
    background: none !important;
    background-size: 100% 100%;
    width: 100%;
    font-size: 28px;
    color: #023F7A;
    line-height: 54px;
    padding-left: 40px;
    height: 60px;
}

/**内容区**/
.center_view .usersView{
    display: block;
    width: 100%;
    margin: 20px auto;
}

/**tab总盒子**/
.center_view .usersView .usersTabView{
    width: 100%;
    background: #fff;
    padding: 4px 10px;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-bottom: none;
    background: #fff;
}
/**item**/
.center_view .usersView .usersTabView .usersTab{
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    padding: 0;
    position: relative;
    cursor: pointer;
    text-align: left;
    background: #fff;
    color: rgb(51, 51, 51);
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    border: none;
    transition: border 0.2s, background 0.2s, color 0.2s;
    height: 44px;
}
.center_view .usersView .usersTabView .usersTab span{
    display: inline-block;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    border-left: 1.5px solid transparent;
    transition: border-color 0.2s, background 0.2s;
}
.center_view .usersView .usersTabView .usersTab.usersTabActive span{
    border-left: 1.5px solid #003580;
    background: linear-gradient(90deg, #003580 0 3px, #000634 3px 100%);
    color: #fff;
    border-radius: 0 4px 4px 0;
    font-weight: bold;
}
.center_view .usersView .usersTabView .usersTab:last-child{
    border-bottom: none;
}

/**右部 总盒子**/
.center_view .usersView .usersBox{
    width: calc(100% - 0px);
    background: #fff;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid #eee;
}
/**form盒子**/
.center_view .usersView .usersBox .usersForm{
    width: 100%;
    padding: 30px;
}
.center_view .usersView .usersBox .usersForm .el-form-item{
    margin: 0px 0px 20px;
    display: flex;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__label{
    width: 150px;
    background: none;
    text-align: right;
    display: block;
    font-size: 16px;
    color: rgb(51, 51, 51);
    font-weight: 500;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 120px);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_inp{
    height: 36px;
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    padding: 0px 10px;
    width: 100%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    font-size: 16px;
}

/**会员**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item{
    display: flex;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item .vip_inp{
    height: 36px;
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    padding: 0px 10px;
    width: 80%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .vip_item .vip_btn{
    background: var(--theme);
    color: rgb(255, 255, 255);
    height: 36px;
    line-height: 36px;
    padding: 0px 20px;
    border-radius: 0px;
    margin: 0px 0px 0px 5px;
    border-color: var(--theme);
}
/**end**/

/**下拉选择**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_sel{
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    width: calc(100% - 120px);
    padding: 0px 10px;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
/**end**/

/**日期选择**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_date{
    line-height: 36px;
    border: 1px solid rgb(221, 221, 221);
    box-sizing: border-box;
    width: 100%;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    font-size: 16px;
}
/**end**/

/**radio**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio{
    display: flex;
    width: calc(100% - 120px);
    align-items: center;
    flex-wrap: wrap;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio{
    width: 30%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio .el-radio__inner{
    border-color: #999;
    background: #fff;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio .el-radio__label{
    color: #999;
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio.is-checked .el-radio__inner{
    border-color: var(--theme);
    background: var(--theme);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_radio .el-radio.is-checked .el-radio__label{
    color: var(--theme);
    font-size: 16px;
}
/**end**/

/**checkbox**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox{
    display: flex;
    width: calc(100% - 120px);
    flex-wrap: wrap;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox{
    width: 20%;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox .el-checkbox__inner{
    border-color: #999;
    background: #fff;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox .el-checkbox__label{
    color: #999;
    font-size: 16px;
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox.is-checked .el-checkbox__inner{
    border-color: var(--theme);
    background: var(--theme);
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_checkbox .el-checkbox.is-checked .el-checkbox__label{
    color: var(--theme);
    font-size: 16px;
}
/**end**/

/**textarea**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_textarea{
}
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_textarea .el-textarea__inner{
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    color: #666;
    font-size: 16px;
}
/**end**/

/**图片上传**/
/* 盒子 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--picture-card{
    background-color: rgb(255, 255, 255);
    width: 100px;
    height: 90px;
    line-height: 100px;
    text-align: center;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    cursor: pointer;
}
/* 图标 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--picture-card .el-icon{
    font-size: 32px;
    color: #999;
}
/* 提示语 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .img-uploader .el-upload__tip{
    font-size: 15px;
    color: #666;
    margin: 0;
}
/**end**/

/**文件上传**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    border-radius: 0px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}
/* 图标 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger .el-icon-upload{
    font-size: 67px;
    color: var(--theme);
    line-height: 50px;
}
/* 提示语 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .upload-demo .el-upload__tip{
    font-size: 15px;
    color: #666;
    margin: 0px 0 0;
    line-height:1;
}
/* 点击上传 */
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .el-upload--text .el-upload-dragger em{
    color: var(--theme);
    font-size: 15px;
}
/**end**/

/**富文本**/
.center_view .usersView .usersBox .usersForm .el-form-item .el-form-item__content .list_editor{
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    border-radius: 0px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    min-height: 300px;
}
/**end**/

/**按钮**/
.center_view .formModel_btn_box{
    display: flex;
    align-items: center;
    width: 100%;
    margin: 40px 0px 0px;
    justify-content: center;
}
/**更新信息**/
.center_view .formModel_btn_box .formModel_confirm{
    margin: 0px 20px 0px 0px;
    padding: 0px 24px;
    width: auto;
    height: 40px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border: 0px;
    cursor: pointer;
    background: var(--theme);
    border-radius: 6px;
}
.center_view .formModel_btn_box .formModel_confirm:hover{
    background: var(--theme);
}
/**退出登陆**/
.center_view .formModel_btn_box .formModel_cancel{
    margin: 0px 20px 0px 0px;
    padding: 0px 24px;
    width: auto;
    height: 40px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    border: 0px;
    cursor: pointer;
    background: var(--theme1);
    border-radius: 6px;
}
.center_view .formModel_btn_box .formModel_cancel:hover{opacity: 0.8;}


.usersTabHoverView {
    position: absolute;
    top: 42px;
    color: #000;
    background: #eee;
    width: 100%;
    left: 0;
    line-height: 40px;
    z-index: 9;
}

.usersTabHoverTab:hover {
    color: var(--theme)!important;
}

.grade-loading-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.loading-center, .success-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.custom-spinner {
  margin-bottom: 18px;
}
.spinner-svg {
  width: 48px;
  height: 48px;
  animation: rotate 1.2s linear infinite;
}
.spinner-path {
  stroke: #409eff;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}
@keyframes dash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
.loading-text {
  font-size: 16px;
  color: #666;
  margin-top: 8px;
  text-align: center;
}
.success-text {
  font-size: 18px;
  color: #67c23a;
  font-weight: bold;
  text-align: center;
}
</style>
